import React, { useState, useEffect } from 'react';
import { Modal, Tree, Row, Col } from 'antd';

import { updateRoleModule } from '@/services/role';
import { queryModuleTree } from '@/services/module';

export interface ConfigFormProps {
  onCancel: () => void;
  onOk: () => void;
  changeRoleModule: () => void;
  modalVisible: boolean;
  defaultChecked?: string[];
  roleId?: number;
}


const ConfigForm: React.FC<ConfigFormProps> = (props) => {
 
  const [treeData, setTreeData] = useState<API.TreeNodeItem[]>([]);

  const { modalVisible, onOk: handleOk, onCancel, roleId, defaultChecked,changeRoleModule } = props;


  const [checkedVals, setCheckedVals] = useState([]);

  const okHandle = async () => {
    await updateRoleModule({
      roleId: roleId,
      modules: defaultChecked.toString()
    });
    setCheckedVals([]);
    handleOk();
  }

  const onCheck = (checkedKeys: any, info: any) => {
    changeRoleModule(checkedKeys);
   // setCheckedVals(checkedKeys);
  };

  useEffect(() => {
    const queryTreeData = async () => {
      var tree = await queryModuleTree({ appCode: 'adm' });
      setTreeData(tree);
    };
    queryTreeData();
  }, []);

  return (
    <Modal
      width={640}

      destroyOnClose
      title="权限配置"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Row style={{    marginRight: '-23px'}}>
        <Col span={6}></Col>
        <Col span={18}>
          <Tree
            style={{ color: 'white', background: '#1a3a81',width:'100%' }}
            checkable
            height={600}
            defaultExpandAll={true}
            defaultCheckedKeys={defaultChecked}
            onCheck={onCheck}
            treeData={treeData as any[]}
          />
        </Col>
      </Row>
    </Modal>
  );
};

export default ConfigForm;
